<template>
  <div class="page">
    <p class="deliverydetail">送货单明细</p>

    <div class="deliverydetailheader">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="deliveryId" label="送货单号" />
        <el-table-column prop="buyer" label="客户名称" />
        <el-table-column prop="address" label="送货地址" />
        <el-table-column prop="deliveryDate" label="送货日期" />
        <el-table-column prop="deliveryMan" label="制单人" />
         <el-table-column prop="taxRate" label="税率">
          <template slot-scope="scope">
            {{ scope.row.taxRate | taxRateFitlter }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryMan" label="送货人" />
        <el-table-column prop="deliveryStatus" label="送货状态">
          <template slot-scope="scope">
            {{ scope.row.deliveryStatus | deliveryStatusFitlter }}
          </template>
        </el-table-column>
        <el-table-column prop="surveyor" label="验收人" />
        <el-table-column prop="checkDate" label="验收日期" />
      </el-table>
    </div>

    <div class="btn">
      <!-- <el-button
        type="primary"
        class="add"
        @click="addgoods()"
        :disabled="editdisabled"
        >新增商品</el-button
      > -->
      <el-button type="primary" class="sh" @click="deliverGoods()"
        >送货</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="datadetail"
        border
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="goodsId" label="商品ID" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsNum" label="送货数量" />
        <el-table-column prop="units" label="辅助单位" />
        <el-table-column prop="goodsWeight" label="送货重量(斤)" />
        <el-table-column prop="actualWeight" label="实际重量" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="totalPrice" label="总金额" />
        <el-table-column prop="goodsStatus" label="验收状态">
          <template slot-scope="scope">
            {{ scope.row.goodsStatus | goodsStatusFitlter }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="editdelivery(scope.row)"
              :disabled="editdisabled"
              >编辑</el-button
            >
            <el-button
              type="danger"
              :disabled="editdisabled"
              @click="deletegoods(scope.row.goodsId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="新增/编辑送货商品"
      :visible.sync="centerDialogVisible"
      width="39%"
      center
    >
      <el-form
        :inline="true"
        :model="goodslist"
        class="demo-form-inline"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="商品名称" prop="deliverId">
          <el-select
            v-model="goodslist.name"
            @change="handelgoodsName"
            :disabled="disable"
            placeholder="请选择"
          >
            <el-option
              v-for="item in goodsNames"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="辅助单位">
          <el-input v-model="goodslist.unit" placeholder="辅助单位"></el-input>
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input
            v-model="goodslist.id"
            placeholder="商品ID"
            :disabled="disable"
          ></el-input>
        </el-form-item>
        <el-form-item label="送货重量">
          <el-input
            v-model="goodslist.weight"
            placeholder="送货重量(斤)"
          ></el-input>
        </el-form-item>
        <el-form-item label="送货数量">
          <el-input
            v-model="goodslist.number"
            placeholder="送货数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="goodslist.unitprice" placeholder="单价"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addgoodsconfirm()">确 定</el-button>
        <el-button @click="cancle()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeliverydetail,
  getgoodslist,
  AddDeliveryGoods,
  EditDeliveryGoods,
  deliverGoods,
  deleteDeliveryGoods
} from "@/api/partner.js";
export default {
  filters: {
    goodsStatusFitlter(value) {
      if (value === 0) {
        return "未验收";
      } else if (value === 1) {
        return "已验收";
      } else {
        return "不合格";
      }
    },
    deliveryStatusFitlter(value) {
      if (value === 0) {
        return "未送货";
      } else if (value === 1) {
        return "已送货";
      } else {
        return "已验收";
      }
    },
     taxRateFitlter(value) {
      if(!value){
        return ''
      }else{
        return value + "%";
      }
        
    }
  },
  data() {
    return {
      tableData: [],
      datadetail: [],
      centerDialogVisible: false,
      goodslist: {
        name: "",
        id: "",
        weight: "",
        number: "",
        unit: "",
        unitprice: ""
      },
      goodsNames: [],
      redact: 0,
      disable: false,
      editdisabled: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handelgoodsName(e) {
      let obj = {};
      obj = this.goodsNames.find(item => {
        return item.value === e;
      });
      console.log(obj.label); //获取的 name
      console.log(e); //获取的 id
      this.goodslist.id = e;
      this.goodslist.name = obj.label;
    },
    init() {
      var deliveryId = { deliveryId: this.$route.query.deliveryId };
      getDeliverydetail(deliveryId)
        .then(res => {
          console.log(res);
          if (res.code === 20000) {
            var arr = [];
            arr.push(res.data);
            this.tableData = arr;
            this.datadetail = res.data.deliveryGoodsList;
            if (this.tableData[0].deliveryStatus === 1) {
              this.editdisabled = true;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 新增送货商品弹窗
    // addgoods() {
    //   this.redact = 0;
    //   this.disable = false;
    //   this.centerDialogVisible = true;
    //   this.getgoodslist();
    // },
    // 编辑送货商品弹窗
    editdelivery(obj) {
      console.log(obj)
      this.redact = 1;
      this.disable = true;
      this.centerDialogVisible = true;
      this.goodslist.name = obj.goodsName;
      this.goodslist.id = obj.goodsId;
      this.goodslist.weight = obj.goodsWeight;
      this.goodslist.unit = obj.units;
      this.goodslist.unitprice = obj.price;
      this.goodslist.number = obj.goodsNum;
      this.getgoodslist();
    },
    // 新增编辑数据发送
    addgoodsconfirm() {
      var data = {
        deliveryId: Number(this.$route.query.deliveryId),
        goodsId: this.goodslist.id,
        goodsName: this.goodslist.name,
        goodsNum: this.goodslist.number,
        goodsWeight: this.goodslist.weight,
        units: this.goodslist.unit,
        price: this.goodslist.unitprice
      };
      if (this.redact === 0) {
        AddDeliveryGoods(data).then(res => {
          console.log(res);
          if (res.code === 20000) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.centerDialogVisible = false;
            this.init();
          }
        });
      } else {
        EditDeliveryGoods(data).then(res => {
          console.log(res);
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.centerDialogVisible = false;
          this.init();
          this.empty();
        });
      }
    },
    // 删除商品
    deletegoods(id) {
      this.$confirm("确认删除此商品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = {
            deliveryId: Number(this.$route.query.deliveryId),
            goodsId: id
          };
          deleteDeliveryGoods(data).then(res => {
            console.log(res);
            if (res.code === 20000) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.init()
            }else{
              this.$message.error(res.msg)
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取商品列表
    getgoodslist() {
      getgoodslist().then(res => {
        console.log(res);
        this.goodsNames = res.rows;
      });
    },
    // 送货按钮
    deliverGoods() {
      var deliveryId = { deliveryId: this.$route.query.deliveryId };
      deliverGoods(deliveryId).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.$message({
            message: "送货成功",
            type: "success"
          });
          this.init();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //   合计列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      var allmoney = 0;
      var goodsNum = 0;
      var goodsWeight = 0;
      data.map(item => {
        allmoney += Number(item.totalPrice);
        goodsNum += Number(item.goodsNum);
        goodsWeight += Number(item.goodsWeight);
        return { allmoney, goodsNum, goodsWeight };
      });
      columns.forEach((column, index) => {
        sums[2] = "合计数量";
        sums[3] = goodsNum;
        sums[5] = goodsWeight;
        sums[7] = "合计金额";
        sums[8] = allmoney;
      });

      return sums;
    },
    // 清空数据
    empty() {
      (this.goodslist.id = ""),
        (this.goodslist.name = ""),
        (this.goodslist.number = ""),
        (this.goodslist.weight = ""),
        (this.goodslist.unit = ""),
        (this.goodslist.unitprice = "");
    },
    // 弹框取消
    cancle() {
      this.disable = false;
      this.centerDialogVisible = false;
      // this.goodslist = {};
      this.empty();
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20px 20px;
  .deliverydetail {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .deliverydetailheader {
    margin-bottom: 50px;
  }
  .btn {
    text-align: right;
    margin-bottom: 30px;
  }
  .content {
    //   width:600px;
  }
}
</style>
